import React, { useEffect, useState } from 'react';

//组件
import { Table} from 'antd';

//图标
import {
    FormOutlined
} from '@ant-design/icons';

//导入请求
import { Staff_list } from '../../../../tools/api'

function StaffManagetable(props) {
    //定义组件状态
    //分页
    var [page, setPage] = useState(1);  ///页码
    var [total, setTotal] = useState(0);   //总数
    var [pageSize, setPageSize] = useState(10);   //每页的个数

    //员工管理列表数据
    var [staffManageList, setStaffManageList] = useState([])

    //表格是否有loading效果
    var [loading, setLoading] = useState(false);

    //定义表格选择行的key
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);

    //编辑
    const edit = () => {

    }
    //发请求获取员工列表的数据
    useEffect(() => {
        Staff_list().then((res) => {
            // console.log(res.data);
            setStaffManageList(res.data)
        })
    }, [])

    //当表格行的选择发生改变时执行
    const onSelectChange = (newSelectedRowKeys) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };

    //定义表格的表头
    const columns = [
        {
            title: '员工编号',   //表格列的名字（显示在表头上）
            dataIndex: 'userid',  //数据对应的属性名
            key: 'userid',
        },
        {
            title: '员工姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '员工账户',
            dataIndex: 'account',
            key: 'account',
        },
        {
            title: '所在部门',
            key: 'department',
            dataIndex: 'department',
        },
        {
            title: '员工职位',
            key: 'job',
            dataIndex: 'job',
        },
        {
            title: '手机号',
            key: 'phone',
            dataIndex: "phone",
        },
        {
            title: '员工状态',
            key: 'leave',
            dataIndex: 'leave',
        },
        {
            title: '添加时间',
            key: 'time',
            dataIndex: "time",
        },
        {
            title: '操作',
            key: 'action',
            dataIndex: 'action',
            render: (_, record) => (
                <>
                    <i className='remove' onClick={() => { edit(record) }}><FormOutlined /></i>
                </>
            ),
        },
    ]

    return (
        <div className="staffManageList">
            {/* pagination分页器，是一个对象   pagination={{ current, pageSize, total }} onChange={onChange} */}
            <Table
                columns={columns}
                dataSource={staffManageList}
                loading={loading}
                pagination={{ page, pageSize, total }}
                rowSelection={rowSelection} />
        </div>
    );
}
export default StaffManagetable;